<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link href="css/reset.css" rel="stylesheet" />
    <link href="css/index.css" rel="stylesheet" />
    <title>Register</title>
</head>
<body leftmargin=0 topmargin=0 oncontextmenu='return false' ondragstart='return false' onselectstart ='return false' onselect='document.selection.empty()' oncopy='document.selection.empty()' onbeforecopy='return false' onmouseup='document.selection.empty()'>
    <div class="RegistBox">
        <div class="RegistVerticalCenteredBox">
            <div class="RegistHead">
                Smart Home Management System
            </div>
            <form action="./Register" method="post">
            <div class="RegistUserBoxOut">
                <div class="RegistUserBox mar_top30">
                    <input required="required" type="text" class="RegistUserInput" placeholder="Phone Number" name="phone"/>
                    <span class="help-text"></span>
                </div>
            </div>
            <div class="RegistUserBoxOut">
                <div class="RegistUserBox">
                    <input required="required" class="RegistUserInput" placeholder="Password" type="password" name="password"/>
                    <span class="help-text"></span>
                </div>
            </div>
            <div class="RegistUserBoxOut">
                <div class="RegistUserBox">
                    <input required="required" class="RegistUserInput" placeholder="Password Again" type="password"  name="password1"/>
                    <span class="help-text"></span>
                </div>
            </div>
            <div class="RegistUserBoxOut">
                <div class="RegistUserBox">
                    <input required="required" type="text" class="RegistUserInput" placeholder="Birthday(like 2000.01.01)" name="dofb"/>
                    <span class="help-text"></span>
                </div>
            </div>
            <div class="RegistUserBoxOut">
                <div class="RegistUserBox">
                    <!-- <input required="required" type="text" class="RegistUserInput" placeholder="性别（男为1，女为0）" name="gender"/> -->
                    <select name="gender" class="RegistUserInput" >
                        <option required="required" value="-1" style="color: rgb(255, 255, 255)">[Option] Gender</option>
                        <option required="required" value="0">Female</option>
                        <option required="required" value="1">Male</option>
                    </select>
                    <span class="help-text"></span>
                </div>
            </div>
            <div class="RegistUserBoxOut">                
                <div class="RegistUserBox">
                    <input required="required" type="text" class="RegistUserInput" placeholder="Family ID" name="fID"/>
                    <span class="help-text"></span>
                </div>
            </div>
            <div class="RegistUserBoxOut">
                <div class="RegistUserBox">
                    <input required="required" type="text" id="inputCode" class="RegistUserInput" placeholder="Verification Code" name="Verify"/>
                    <span class="help-text"></span>
                </div>
            </div>
            <div class="ValidUserBoxOut">
                <div class="ValidLastBox clearfix">
                    <div class="ValidleftBox">
                        <label for="inputcheck"></label>
                        <div id="checkCode" class="code"></div>
                    </div>
                        <div class="ValidRightBox">
                            <button class = "btn--secondary" onclick="createCode(4)">Change</button>
                        </div>
                </div>
            </div>
            <div class="RegistUserBoxOut">
                <div class="RegistLastBox clearfix">
                    <div class="leftBox">
                        <label for="inputcheck"></label>
                        <a href="index.jsp"><span>Have account? Goto Login!</span></a>
                        <br />
                        <br />
                        <a href="RegisterFamily.jsp"><span>First family member? Goto Register Family!</span></a>
                        <br />
                        <br />
                        <br />
                    <div class="RightBox">
                        <input type="submit" class="RightBox" name ="submit" value="Register" onclick="validateCode()" />
                    </div>
                </div>
            </div>
        </div>
            </form>
        </div>
    </div>
</body>
<script>
    window.onload = function () {
      createCode1(4);
    };
    function createCode(length) {
      var code = "";
      var codeLength = parseInt(length);
      var checkCode = document.getElementById("checkCode");
      var codeChars = new Array(
        0,1,2,3,4,5,6,7,8,9,
        "a","b","c","d","e","f","g","h","i","j","k","l","m","n",
        "o","p","q","r","s","t","u","v","w","x","y","z",
        "A","B","C","D","E","F","G","H","I","J","K","L","M","N",
        "O","P","Q","R","S","T","U","V","W","X","Y","Z"
      );
      for (var i = 0; i < codeLength; i++) {
        var charNum = Math.floor(Math.random() * 62);
        code += codeChars[charNum];
      }
      if (checkCode) {
        checkCode.className = "code";
        checkCode.innerHTML = code;
      }
      window.location.href = "register.jsp";
    }
    function createCode1(length) {
      var code = "";
      var codeLength = parseInt(length);
      var checkCode = document.getElementById("checkCode");
      var codeChars = new Array(
        0,1,2,3,4,5,6,7,8,9,
        "a","b","c","d","e","f","g","h","i","j","k","l","m","n",
        "o","p","q","r","s","t","u","v","w","x","y","z",
        "A","B","C","D","E","F","G","H","I","J","K","L","M","N",
        "O","P","Q","R","S","T","U","V","W","X","Y","Z"
      );
      for (var i = 0; i < codeLength; i++) {
        var charNum = Math.floor(Math.random() * 62);
        code += codeChars[charNum];
      }
      if (checkCode) {
        checkCode.className = "code";
        checkCode.innerHTML = code;
      }
    }
    function validateCode() {
      var checkCode = document.getElementById("checkCode").innerHTML;
      var inputCode = document.getElementById("inputCode").value;
      console.log(checkCode);
      console.log(inputCode);
      if (inputCode.toUpperCase() != checkCode.toUpperCase()) {
        window.location.href = "register.jsp";
        alert("Wrong Verification Code!");
        createCode(4);
      }
    }
  </script>
</html>